<template>
  <div id="history">
    <div class="bgc">
      <van-row class="centenr">
        <van-col span="24">
          <van-nav-bar title="浏览历史" left-text="返回" left-arrow @click-left="onClickLeft" />
        </van-col>
        <van-col span="24" class="data">
          <p>2022-04-25</p>
        </van-col>
        <van-col span="24">
          <van-checkbox-group v-model="result" ref="checkboxGroup">
            <Goods :history="item" v-for="(item, index) in GetHistory" :key="index" />
          </van-checkbox-group>
        </van-col>
      </van-row>
      <van-col span="24">
        <van-goods-action>
          <van-goods-action-icon />
          <van-goods-action-icon />
          <van-goods-action-button type="warning" text="全选" @click="checkAll" />
          <van-goods-action-button type="danger" text="删除" @click="del" />
        </van-goods-action>
      </van-col>
    </div>
  </div>
</template>
<script>
import Goods from '@/components/user/GoodsContent.vue'
export default {
  name,
  data() {
    return {
      result: [],
      GetHistory: {}
    }
  },
  components: {
    Goods
  },
  mounted() {
    this.onGetList()
  },
  methods: {
    checkAll() {
      this.$refs.checkboxGroup.toggleAll()
    },
    // 删除全部记录
    del() {
      this.history.forEach(element => {
        this.$post('footprint/delete', { id: element.id }).then(result => {
          location.reload() //刷新页面
          this.onGetList()
        })
      })
    },
    onClickLeft() {
      this.$router.back()
    },
    onGetList() {
      this.$get('footprint/list')
        .then(result => {
          this.GetHistory = result.data.data.list
        })
        .catch(err => {})
    }
  }
}
</script>
<style lang="less" scoped>
.centenr {
  margin-bottom: 0.15rem;
  .data {
    background-color: #fff;
    padding-left: 20px;
    margin: 2px 0px;
    p {
      margin: 0.16rem 0rem;
    }
  }
}
.bottom {
  height: 44px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  .van-button {
    float: right;
    margin-left: 0.3rem;
  }
}
</style>
